<template>
  <div class="pb-30">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img class="pc100" :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类列表 -->
    <div id="sort" class="sort flex aic jc-sa mt-10">
      <router-link
        to="/classify"
        v-for="(item, index) in typeList"
        :key="index"
        class="sort-item flex fdc jc-c aic"
      >
        <img :src="item.iconUrl" alt />
        <span class="sort-title mt-10 f12">{{ item.name }}</span>
      </router-link>
    </div>

    <div class="discount flex jc-sa">
      <div class="discount-item bj1 flex aic jc-sa rel">
        <span class="cjsj abs"></span>
        <span class="abs discount-title f10">秒杀</span>
        <div class="discount-left">
          <p class="f14">秒杀</p>
          <p class="f12 mt-5 col">超值惊喜</p>
          <p class="f12 mt-5 kanjia">立即砍价</p>
        </div>
        <div class="discount-right">
          <img
            src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png"
            alt
          />
        </div>
      </div>
      <div class="discount-item bj2 flex aic jc-sa rel">
        <span class="cjsj abs"></span>
        <span class="abs discount-title f10">拼团</span>
        <div class="discount-left">
          <p class="f14">拼团</p>
          <p class="f12 mt-5 col">限时拼团</p>
          <p class="f12 mt-5 kanjia">一键拼团</p>
        </div>
        <div class="discount-right">
          <img
            src="http://fresh.huruqing.cn/img/pintuan-icon.711363b5.png"
            alt
          />
        </div>
      </div>
    </div>
    <div class="coupon flex aic jc-sb mt-5 mb-5">
      <div class="flex f16">
        <i class="iconfont ml-5 icon-youhuijuan"></i>
        <p class="ml-5">超值福利</p>
        <p class="ml-5">|</p>
        <p class="ml-5">全场满减</p>
      </div>
      <div>
        <p class="f16">
          立即领取
          <i class="iconfont icon-arrow-up-copy-copy-copy"></i>
        </p>
      </div>
    </div>

    <div class="content mb-30 pb-30">
      <!-- 排序 -->
      <van-sticky>
        <div class="content-title mb-15 flex f14 jc-sa aic">
          <div>推荐</div>
          <div class="flex aic">
            销量
            <div class="flex fdc jc-sa">
              <i class="iconfont icon-shangjiantou"></i>
              <i class="iconfont icon-arrow-up"></i>
            </div>
          </div>
          <div class="flex aic">
            价格
            <div class="flex fdc jc-sa">
              <i class="iconfont icon-shangjiantou"></i>
              <i class="iconfont icon-arrow-up"></i>
            </div>
          </div>
        </div>
      </van-sticky>

      <!-- 产品列表 -->
      <div id="item" class="flex jc-sb container">
        <router-link
          :to="`/product/detail/${item.productId}`"
          v-for="item in productList"
          :key="item.productId"
          class="content-item ml-10 mr-10"
        >
          <div class="item-img">
            <img :src="item.imgUrl" alt />
          </div>
          <p class="f14 mt-15">金秋红蜜桃</p>
          <p class="f12 mt-5 toe intr">
            {{ item.slaveName }}
          </p>
          <div class="flex mt-5 jc-sb">
            <p>
              <span class="f10 red">￥</span>
              <span class="f15 red">57.80</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f14 f999 pr-5">：{{ item.inventory }}</span>
            </p>
          </div>
        </router-link>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Footer'
import $axios from '@/utils/request'
export default {
  components: {
    Footer,
  },
  data() {
    return {
      // 轮播图列表
      bannerList: [],
      // 分类列表
      typeList: [],
      // 产品列表
      productList: [],
      // 当前页
      pageNum: 1,
    }
  },

  created() {
    this.getBannerList()
    this.getTypeList()
    this.getProductList()
  },

  methods: {
    // 请求轮播图列表数据
    async getBannerList() {
      try {
        // 添加loading
        this.$toast.loading({})
        let res = await $axios.get('/product/getBanners')
        this.bannerList = res.banners
        // 关闭loading
        this.$toast.clear()
      } catch (error) {
        // 失败提示
        this.$toast.fail(error)
        // 关闭loading
        this.$toast.clear()
      }
    },

    // 获取分类列表
    async getTypeList() {
      try {
        let res = await $axios.get('/category/all')
        this.typeList = res.list
      } catch (error) {
        this.$toast.fail(error)
      }
    },
    // 获取产品列表
    async getProductList() {
      try {
        let data = { pageNum: this.pageNum }
        let res = await $axios.get('/product/list', data)
        this.productList = res.list
        this.pageNum++
      } catch (error) {
        this.$toast.fail(error)
      }
    },
  },
}
</script>

<style lang="less">
@import './list.less';
</style>
